<template>
  <el-dialog :title=name :close-on-click-modal="true" :before-close="handleClose" width="80vw" :visible.sync="visible">

    <div style="width:75vw;height:500px">
      <div class="containerLevel">
        <z-chart :option="option" class="chart"></z-chart>
        <div class="toolbar">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" placement="bottom-start" @change="dateChange"
            v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { formatDate } from "@/utils/timeUtils.js";

export default {
  props: {

    name: {
      type: String,
      default: "液位曲线"
    }
  },
  data() {
    const pre = formatDate(new Date(), 'yyyy-MM-dd') + " 00:00:00"
    const now = formatDate(new Date(), 'yyyy-MM-dd') + " 24:00:00"

    return {
      visible: true,
      date: [pre, now],
      dataList: [],
      option: {},
      containerId:""
    };
  },
  
  methods: {

    init(id) {
      this.containerId = id;
      this.levelList();
    },
    handleClose() {
      this.$emit('close', "");
    },

    levelList() {
      var startDate = this.date[0];
      var endDate = this.date[1];
      this.$http({
        url: this.$http.adornUrl(
          `/sign/signContainerRealtimeLevel/realList?contanerId=${this.containerId}&startDatetime=${startDate}&endDatetime=${endDate}`
        ),
        method: "post",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.list;
          this.setOption();
        }
      });
    },
    dateChange(res) {
      this.levelList();
    },

    setOption() {
      const props = [
        {
          value: "realtimeLiquidLevel",
          name: "液位",
          unit: "米",
          data: [],
          type: "line",
          color: "#00A0E9",
          yAxisIndex: 0
        }
      ];
      const legendData = props.map(e => e.name);

      const xAxisData = [];

      this.dataList.forEach(e => {
        var time = e.createTime;
        xAxisData.push(time);
        props.forEach(f => {
          f.data.push(e[f.value]);
        });
      });
      const series = props.map(f => {
        const serie = {
          name: f.name,
          type: f.type,
          data: f.data,
          itemStyle: { color: f.color },
          yAxisIndex: f.yAxisIndex
        };
        if (f.type === "bar") {
          serie.barWidth = "18%";
          serie.itemStyle.barBorderRadius = [4, 4, 0, 0];
        } else if (f.type === "line") {
          serie.smooth = true;
        }
        return serie;
      });
      this.option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: { color: "#999" }
          }
        },
        toolbox: {
          feature: {
            saveAsImage: { show: true }
          }
        },
        legend: { data: legendData, show: true },
        grid: { left: 20, right: 70, bottom: 30, containLabel: true },
        xAxis: [
          {
            type: "category",
            data: xAxisData,
            axisPointer: { type: "shadow" },
            axisLabel: {
              interval: 0,
              formatter: function(value) {
                const arr = value.split(' ')
                return arr[0] + '\n' + arr[1]
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "米",
            min: 0,
            axisTick: { show: true },
            axisLine: { show: true, lineStyle: { color: "#666" } }
          }
        ],
        series: series,
        dataZoom: [
          {
            show: true,
            height: 15,
            xAxisIndex: [0],
            bottom: "2%",
            start: 0,
            end: xAxisData.length > 20 ? (20 / xAxisData.length) * 100 : 100,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "100%",
            handleStyle: {
              color: "#d3dee5"
            },
            borderColor: "#90979c"
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35
          }
        ]
      };
    }

  }
}
</script>

<style lang="scss" scoped>
.containerLevel {
  background: #fff;
  padding: 16px 12px;
  border-radius: 5px;
  position: relative;
  .toolbar {
    position: absolute;
    top: 2px;
    right: 12px;
  }
  .chart {
    margin-top: 28px;
    width: 100%;
    height: 420px;
  }
}
</style>
